import { Fragment, useId, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import NTable from "@/components/n-table";
import { SFields, SCard } from "@cnjingx/antd-components";
import PersonalBaseInfo from "./components/PersonalBaseInfo";
import InfoSummary from "./components/InfoSummary";
import {
  spouseColumns,
  residenceColumns,
  residenceItems,
  companyColumns,
  companyItems,
  jobColumns,
  jobItems,
} from "./configs";
import styles from "./index.module.css";

const getReportDetail = async (params) => {
  return new Promise((resolve, reject) => {
    const items = [
      { label: "被查询者姓名", value: 1 },
      { label: "被查询者证件类型", value: 12 },
      { label: "被查询者证件号码", value: 13 },
      { label: "报告编号", value: 14 },
      { label: "查询机构", value: 15 },
      { label: "报告时间", value: 156 },
      { label: "查询原因", value: 17 },
    ];
    setTimeout(() => {
      resolve(items);
    }, 2000);
  });
};
const cardItems = [
  { label: "证件类型", value: 156 },
  { label: "证件号码", value: 17 },
];
const fraudTipsItems = [
  { label: "证件类型", value: 156 },
  { label: "证件号码", value: 17 },
];
const spouseItems = [{ name: "张三", phoneNum: "18200520127" }];

export function Component() {
  const state = useLocation();
  const key = useId();
  console.log("state", state);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [idCardData, setIdCardData] = useState([
    { key: 1, phoneNum: 18200520127, updateTime: "2024-04-16" },
    { key: 2, phoneNum: 18200520127, updateTime: "2024-04-12" },
  ]);
  const personnalProps = {
    spouseColumns,
    residenceColumns,
    residenceItems,
    companyColumns,
    companyItems,
    jobColumns,
    jobItems,
  };
  useEffect(() => {
    getReportDetail().then((data) => {
      setItems(data);
      setLoading(false);
    });
  }, []);
  return (
    <Fragment key={key}>
      <SFields
        items={items}
        configs={{ title: "个人征信报告" }}
        loading={loading}
      ></SFields>
      <SFields
        className={styles.mgn16}
        items={cardItems}
        configs={{ title: "其他证件信息" }}
        loading={loading}
      ></SFields>
      <SFields
        className={styles.mgn16}
        items={fraudTipsItems}
        configs={{ title: "防欺诈提示" }}
        loading={loading}
      ></SFields>
      <SCard
        className={styles.mgn16}
        configs={{ title: "异议信息提示" }}
        loading={loading}
        isShowExtra={false}
      >
        <div style={{ textAlign: "center" }}>
          信息主体对信用报告内容提出了 3
          笔异议且正在处理中，请浏览时注意阅读相关内容。
        </div>
      </SCard>
      {/* 个人基本信息 */}
      <div>
        <PersonalBaseInfo data={idCardData} loading={loading} {...personnalProps}/>
      </div>
      {/* 信息概要 */}
      <div>
        <InfoSummary ratingItems={[]}/>
      </div>
    </Fragment>
  );
}
